<template>
    <el-aside class="water-drop-aside" :class="{ 'collapsed': isCollapsed }">
        <div class="collapse-button" @click="toggleCollapse">
            <el-icon>
                <component :is="isCollapsed ? 'Expand' : 'Fold'"></component>
            </el-icon>
        </div>
        <el-scrollbar>
            <el-menu background-color="#fff" active-text-color="#409eff" class="aside-menu water-drop-menu"
                :default-active="activeMenu" :collapse="isCollapsed">
                <el-menu-item v-for="item in noChilden" :index="item.name" :key="item.name" @click="handlemenu(item)">
                    <el-icon>
                        <component class="icon" :is="item.meta?.icon"></component>
                    </el-icon>
                    <template #title>{{ item.meta?.title }}</template>
                </el-menu-item>
                <el-sub-menu v-for="item in hasChilden" :index="item.name" :key="item.name">
                    <template #title>
                        <el-icon>
                            <component class="icon" :is="item.meta?.icon"></component>
                        </el-icon>
                        <span>{{ item.meta?.title }}</span>
                    </template>
                    <!-- <el-menu-item-group> -->
                    <el-menu-item v-for="subItem in item.children" :key="subItem.path" :index="subItem.path"
                        @click="handlemenuchild(item, subItem)" class="sub-menu-deep">
                        <el-icon>
                            <component class="icon" :is="subItem.meta?.icon"></component>
                        </el-icon>
                        <template #title>{{ subItem.meta?.title }}</template>
                    </el-menu-item>
                    <!-- </el-menu-item-group> -->
                </el-sub-menu>

            </el-menu>
        </el-scrollbar>
    </el-aside>
</template>

<script lang="ts" setup>
import { computed, ref, watch, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import type { RouteRecordRaw } from 'vue-router';
import { Expand, Fold } from '@element-plus/icons-vue';

const list = ref<RouteRecordRaw[]>([]);
const router = useRouter();
const isCollapsed = ref(false);

const toggleCollapse = () => {
    isCollapsed.value = !isCollapsed.value;
    // 可以存储到 localStorage 以保持状态
    localStorage.setItem('sidebarCollapsed', isCollapsed.value.toString());
};

onMounted(() => {
    //找到根路由
    const childRoutes = router.getRoutes().find(route => route.path === '/')?.children ?? [];

    list.value = childRoutes.filter(route => route.meta && route.meta.title);
    
    // 从 localStorage 恢复侧边栏状态
    const savedState = localStorage.getItem('sidebarCollapsed');
    if (savedState !== null) {
        isCollapsed.value = savedState === 'true';
    }
})
const hasChilden = computed(() =>
    list.value.filter(item =>
        item.meta?.aside &&
        item.children &&
        item.children.length > 0 &&
        item.children.some(child => child.meta?.aside)
    ).map(item => ({
        ...item,
        children: item.children?.filter(child => child.meta?.aside) // 过滤掉 meta.aside 为 false 的子路由
    })).filter(item => item.children && item.children.length > 0) // 确保过滤后仍有子路由
)
const noChilden = computed(() =>
    list.value
        .filter(item =>
            item.meta?.aside && // 确保 aside 为 true
            (!item.children || // 没有子路由
                item.children.filter(child => child.meta?.aside).length === 0) // 或子路由中没有 aside 为 true 的
        )
);
const route = useRoute()
const handlemenu = (item) => {
    router.push({ name: item.name })
}
const handlemenuchild = (item, subItem) => {
    router.push({ name: subItem.name })
}
const activeMenu = ref(route.name)

// 监听路由变化，更新激活的菜单项
watch(() => route.name, (name) => {
    activeMenu.value = name
}, { immediate: true })

</script>

<style scoped>
.water-drop-aside {
    height: calc(100vh - 70px); /* 设置为全屏高度 */
    background: #f5f7fa;
    border-radius: 0 24px 24px 0;
    box-shadow: 8px 0 16px -8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    position: relative;
    transition: all 0.3s ease;
    width: 200px;
}

.water-drop-aside.collapsed {
    width: 64px;
}

.collapse-button {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s;
}

.collapse-button:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.water-drop-aside::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    transform: scale(1.2);
    filter: blur(20px);
    z-index: 0;
}

.water-drop-menu {
    border-right: none;
    background: transparent !important;
    position: relative;
    z-index: 1;
    padding: 20px 0;
}

.water-drop-menu :deep(.el-menu-item),
.water-drop-menu :deep(.el-sub-menu__title) {
    height: 56px;
    line-height: 56px;
    margin: 8px 16px;
    border-radius: 16px;
    color: #606266;
    transition: all 0.3s ease;
}

.water-drop-menu :deep(.el-menu-item.is-active) {
    background: #ecf5ff;
    color: #409eff;
    font-weight: 600;
    box-shadow: 0 6px 12px -6px rgba(64, 158, 255, 0.2);
    transform: translateY(-2px);
}

.water-drop-menu :deep(.el-menu-item:hover),
.water-drop-menu :deep(.el-sub-menu__title:hover) {
    background-color: rgba(255, 255, 255, 0.6);
    color: #409eff;
    box-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

/* 移除二级菜单下拉列表的背景效果 */
.water-drop-menu :deep(.el-sub-menu .el-menu) {
    background-color: transparent !important;
    border: none;
    padding: 0;
}

.water-drop-menu :deep(.sub-menu-deep) {
    margin: 6px 16px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 12px;
    height: 48px;
    line-height: 48px;
    position: relative;
    overflow: hidden;
}

.water-drop-menu :deep(.sub-menu-deep.is-active) {
    background: #ecf5ff;
    color: #409eff;
    font-weight: 600;
    box-shadow: 0 4px 10px -4px rgba(64, 158, 255, 0.2);
    transform: translateY(-1px);
}

.water-drop-menu :deep(.sub-menu-deep:hover) {
    background-color: rgba(255, 255, 255, 0.7);
    color: #409eff;
    box-shadow: 0 3px 8px -3px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.water-drop-menu :deep(.sub-menu-deep::before) {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    transform: scale(1.1);
    filter: blur(10px);
    z-index: -1;
}

.water-drop-menu :deep(.el-sub-menu.is-opened) {
    background: transparent; /* 移除已打开子菜单的背景 */
    border-radius: 16px;
    margin: 8px 16px;
    padding-bottom: 8px;
}

.water-drop-menu :deep(.el-sub-menu.is-opened > .el-sub-menu__title) {
    margin-top: 0;
    margin-bottom: 0;
}

.icon {
    margin-right: 8px;
    font-size: 18px;
}
</style>